
.index-main {
	display: flex;
	flex-direction: column;
	position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 100%;
    font-size: 28rpx;
    background-color: #f5f5f5;
	.search-wrap {
		$nav-height: 60rpx;
		background-color: #e43130;
		/deep/.uni-navbar--border {
			border: 0!important;
			.city {
				display: flex;
				flex-direction: row;
				align-items: center;
				justify-content: flex-start;
				margin-left: 8rpx;
				
				
				.city-text {
					width: 106rpx;
					.uni-nav-bar-text {
						position: relative;
						bottom: 2rpx;
						font-size: 28rpx;
					}
				}
				
				.city-icons {
					.uni-icons {
						color: #FFFFFF!important;
					}
				}
			}
			.input-view {
				display: flex;
				flex-direction: row;
				flex: 1;
				background-color: $uni-bg-color-grey;
				height: $nav-height;
				border-radius: 30rpx;
				padding: 0 30rpx;
				flex-wrap: nowrap;
				margin: 14rpx 0;
				line-height: $nav-height;
				.input-uni-icon {
					line-height: $nav-height;
				}
				.nav-bar-input {
					height: $nav-height;
					line-height: $nav-height;
					width: 370rpx;
					padding: 0 10rpx;
					color: #333;
					font-size: $uni-font-size-base;
					background-color: $uni-bg-color-grey;
				}
			}
		}
	}
	.scroll-wrapper {
		flex: 1;
		overflow-y: auto;
		overflow-x: hidden;
		.banner-box {
			width: 100%;
			.swiper-box {
				z-index: 1;
				.swiper-item {
					padding: 10rpx 20rpx;
					height: 100%;
					box-sizing: border-box;
					overflow: hidden;
					.banner-img {
						width: 100%;
						height: 100%;
						border-radius: 20rpx;
					}
				}
			}
			&::after {
				content: '';
				  width: 140%;
				  height: 200rpx;
				  position: absolute;
				  left: -20%;     //椭圆左边隐藏10%，右边隐藏10%
				  top: 0;
				  border-radius: 0 0 50% 50%;  //左上角，右上角，右下角，左下角
				  background: #e43130;
			}
			
			/deep/.uni-swiper__dots-box {
				z-index: 2;
				.uni-swiper__dots-item {
					width: 10rpx!important;
					height: 10rpx!important;
					border: 0!important;
					background-color: rgba(0,0,0,0.4)!important;
				}
				.uni-swiper__dots-long {
					width: 28rpx!important;
					height: 10rpx!important;
					border: 0!important;
					background-color: #fa2c19!important;
				}
			}
		}
		.menu-box {
			margin-bottom: 30rpx;
			padding: 0 20rpx;
			padding-top: 20rpx;
			width: 100%;
			// background-image: linear-gradient(#CB135D,#D95E8F,#F6F6F6);
			box-sizing: border-box;
			.menu-content {
				// background: #FFFFFF;
				// box-shadow: 0px 2rpx 24rpx 0px rgba(0, 166, 255, 0.17);
				border-radius: 10rpx;
				display: flex;
				flex-wrap: wrap;
				justify-content: space-around;
				.menu-item {
					flex: 0 0 20%;
					padding: 20rpx 0;
					text-align: center;
					.menu-icon {
						display: block;
						margin: 0 auto;
						width: 80rpx;
						height: 80rpx;
					}
					.menu-text {
						font-size: 24rpx;
						color: #666666;
					}
				}
				
			}
		}
		.seckill-box {
			margin: 0 20rpx;
			padding: 0 20rpx;
			background: #FFFFFF;
			box-shadow: 0px 2rpx 24rpx 0px rgba(0, 166, 255, 0.17);
			border-radius: 10rpx;
			.top-wrap{
				position: relative;
				width: 100%;
				height: 68rpx;
				line-height: 68rpx;
				background-image: url('~@/static/images/seckill-bg.png');
				background-size: cover;
				.top-left {
					margin-right: 20rpx;
					color: #333;
				}
				.top-center {
					display: inline-block;
					margin-left: 10rpx;
					.seckill-time-text {
						color: #ff2727;
					}
					.seckill-time-icon {
						margin-right: 30rpx;
						display: inline-block;
						width: 40rpx;
						height: 34rpx;
						vertical-align: middle;
					}
					.j_sk_time {
						padding: 0 2rpx;
						font-size: 24rpx;
						color: #fff;
						background-image: linear-gradient(-140deg,#ff6152,#fa2c19);
						background-color: #fa2c19;
						border-radius: 6rpx;
						text-align: center;
					}
					.seckill-time-separator {
						margin: 0 4rpx;
						color: #f2270c;
					}
				}
				.top-right {
					position: absolute;
					top: 0;
					right: 0;
					font-size: 24rpx;
					color: #f2270c;
					.more-icon {
						width: 22rpx;
						height: 22rpx;
					}
				}
			}
			.bottom-wrap {
				padding-bottom: 20rpx;
				display: flex;
				.seckill-item {
					flex: 0 0 16.66%;
					text-align: center;
					.seckill-img {
						display: block;
						width: 100%;
						height: 110rpx;
					}
					.price {
						margin-top: 10rpx;
						margin-bottom: 4rpx;
						display: block;
						color: #f2270c;
						font-size: 26rpx;
						line-height: 26rpx;
					}
					.init-price {
						display: block;
						color: #999;
						font-size: 26rpx;
						line-height: 26rpx;
						text-decoration: line-through;
					}
					.symbol {
						font-size: 22rpx;
					}
				}
			}
		}
		.recommend-box {
			margin: 30rpx 20rpx;
			display: flex;
			justify-content: space-between;
			.recommend-item {
				position: relative;
				flex: 0 0 24%;
				height: 240rpx; 
				background-image: url('~@/static/images/recommend-bg.jpg');
				background-size: 100% 100%;
				background-repeat: no-repeat;
				.recommend-avator {
					position: absolute;
					top: 20rpx;
					left: 50%;
					transform: translateX(-50%);
					width: 130rpx;
					height: 130rpx;
					border-radius: 16rpx;
				}
				.recommend-text {
					position: absolute;
					bottom: 10rpx;
					left: 0;
					width: 100%;
					text-align: center;
					color: #FFFFFF;
					font-size: 20rpx;
					.text {
						line-height: 28rpx;
					}
				}
			}
		}
		.goods-box {
			margin: 0 20rpx;
			display: flex;
			justify-content: space-between;
			flex-wrap: wrap;
			.goods-item {
				margin-bottom: 20rpx;
				padding-bottom: 40rpx;
				flex: 0 0 calc((100% - 10px)/2);
				background-color: #FFFFFF;
				border-radius: 16rpx;
				.goods-avator {
					display: block;
					width: 100%;
					height: 346rpx;
				}
				.similar-goods-text {
					margin-top: 10rpx;
					padding: 0 10rpx;
					color: #1a1a1a;
					font-size: 26rpx;
					line-height: 32rpx;
					overflow: hidden;
					text-overflow: ellipsis;
					display: -webkit-box;
					-webkit-line-clamp: 2;
					-webkit-box-orient: vertical;
				}
				.goods-info {
					position: relative;
					margin-top: 10rpx;
					padding-left: 10rpx;
					.price {
						color: #fa2c19;
					}
					.similar {
						position: absolute;
						right: 0;
						padding: 4rpx 10rpx;
						font-size: 20rpx;
						color: grey;
						border-radius: 22rpx;
						border-top-right-radius: 0;
						border-bottom-right-radius: 0;
						background-color: #f0f2f5;
					}
				}
			}
		}
	}
}